label {
  display: block;

  span {
    display: block;
    font-weight: bold;
    margin-bottom: calc(var(--meh-spacing) / 4);
  }
}

label.required span::after {
  content: "*";
  color: var(--meh-accent);
}

/* focus */
input, textarea, button, [role="button"] {
  &:focus {
    outline: none;
    border-color: var(--meh-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--meh-accent), transparent 70%);
  }
}

button, [role="button"] {
  cursor: pointer;
}


/* colors and borders */
input, textarea, button {
  padding: calc(var(--meh-spacing) / 2);
  background-color: var(--meh-background);
  color: var(--meh-foreground);
  border: 1px solid var(--meh-foreground);
  border-radius: var(--meh-border-radius);
}

button {
  background-color: var(--meh-button-background);
  color: var(--meh-foreground);
  fill: var(--meh-foreground);

  &:hover {
    background-color: color-mix(in srgb, var(--meh-button-background), var(--meh-foreground) 10%);
  }
}
